<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas width="500px" height="500px" id="canvas"></canvas>
	</body>
	<style>
		canvas {
			margin: 0 auto;
			border: 1px solid #000;
			display: block;
		}
	</style>
	<script>
		var canvas = document.querySelector('#canvas'); //获取画布
		var ctx = canvas.getContext('2d'); //获取画布上下文

		/* ctx.beginPath();//开始路径
		ctx.moveTo(100,100);//起始点
		ctx.lineTo(400,100)//结束点
		ctx.strokeStyle="#666fff";//颜色
		ctx.lineWidth=6;
		ctx.stroke();//上色
		
		
		ctx.beginPath();//开始路径
		ctx.moveTo(300,100);//起始点
		ctx.lineTo(300,400)//结束点
		ctx.strokeStyle="#c8c8aa";//颜色
		ctx.lineWidth=6;
		ctx.stroke();//上色
		ctx.closePath();//闭合执行 */
		/* xuxian(100, 100)
		xiexuxian(100,100)
		//虚线
		function xuxian(x, y) {
			for (let i = 0; i < 10; i++) {
				drawLine(x+10*i, y, x+ 5 + 10*i, y, 'red', 1)
			}
		}
		function xiexuxian(x, y) {
			for (let i = 0; i < 10; i++) {
				drawLine(x+10*i, y+10*i, x+ 5 + 10*i, y+5+10*i, 'green', 1)
			}
		}
		//实线
		function drawLine(x1, y1, x2, y2, color, width) {
			ctx.beginPath(); //开始路径
			ctx.moveTo(x1, y1); //起始点
			ctx.lineTo(x2, y2); //结束点
			ctx.strokeStyle = color; //颜色
			ctx.lineWidth = width;
			ctx.stroke(); //上色
			ctx.closePath()
		} */
		
		// 矩形
		// 矩形图样式
		/* ctx.beginPath();//开始路径
		ctx.moveTo(100,100);//起始点
		ctx.lineTo(100,400)//结束点
		ctx.lineTo(400,400)//结束点
		ctx.strokeStyle="#666fff";//颜色
		ctx.lineWidth=6;
		ctx.stroke();//上色
		ctx.closePath();
		
		// let arr=[100,500,200,300,700,50,30,300]
		for (let i = 0 ; i < 7 ; i ++) {
			let height=Math.random()*280+10
			// let color=parseInt(Math.random()*999999+000000).toString(16)
			let color=parseInt(Math.random()*0xFFFFFF).toString(16)
			console.log('color',color)
			ctx.fillStyle='#'+color;
			ctx.fillRect(120+40*i,400-height,20,height)
			// ctx.strokeRect(120+40*i,400-height,20,height)//空心 strokRect
		} */
		
		
		// 填充清楚
		/* ctx.rect(100,100,300,200);
		ctx.fillStyle='yellow';
		ctx.fill();
		ctx.clearRect(250,200,40,40) */
		
		// 园
		/* ctx.arc(100,100,30,5*Math.PI,2*Math.PI,false)
		ctx.fillStyle='green';
		ctx.fill()
		ctx.strokeStyle='red';
		ctx.stroke() */
		/* //比心
		ctx.beginPath()
		ctx.arc(100,100,50,0,1*Math.PI,true)
		ctx.stroke()
		ctx.beginPath()
		ctx.arc(200,100,50,5*Math.PI,2*Math.PI,false)
		ctx.stroke()
		ctx.beginPath()
		ctx.arc(150,100,100,0,0.5*Math.PI,false)
		ctx.stroke()
		ctx.beginPath()
		ctx.arc(150,100,100,0.5*Math.PI,Math.PI,false)
		// ctx.fillStyle='green';
		// ctx.fill()
		// ctx.strokeStyle='red';
		ctx.stroke() */
		
		// ctx.beginPath();
		// ctx.moveTo(50,100);
		// ctx.lineTo(150,250);
		// ctx.moveTo(250,100);
		// ctx.lineTo(150,250);
		// ctx.strokeStyle='green';
		// ctx.stroke()
		// ctx.closePath()
		
		
		
		// 茶杯
		// 身子
		ctx.strokeRect(100,100,100,100)//空心 strokRect
		/* drawLine(100,100,100,200,'red',2)
		drawLine(100,100,200,100,'red',2)
		drawLine(200,100,200,200,'red',2)
		drawLine(100,200,200,200,'red',2) */
		// 把手
		yuan(200,150,30,0,false)
		// 热气
		// yuan(120,50,10,1,true)
		// yuan(120,70,10,1,false)
		// yuan(150,50,10,1,true)
		// yuan(150,70,10,1,false)
		// yuan(180,50,10,1,true)
		// yuan(180,70,10,1,false)
		
		for (let I = 0 ; I < 4 ; I ++) {
			yuan(110+20*I,50,10,1,true)
			yuan(110+20*I,70,10,1,false)
		}
		
		function yuan(x,y,r,width,flag){
			ctx.beginPath()
			ctx.arc(x,y,r,-Math.PI/2,Math.PI/2,flag)
			ctx.stroke()
		}
		
		
		// 定生死棋动画
		let deg=Math.PI*2/360;
		let count=0;
		let timer=setInterval(function(){
			count++
			ctx.beginPath()
			ctx.arc(250,250,200,0,count*deg,false)
			ctx.stroke()
			if(count==360){
				clearInterval(timer)
			}
		},10)
	</script>
</html>
